<template>
  <div class="affairs-handle">
    <el-form :model="formData" ref="form" :rules="rules" label-width="120px">
      <div class="form-section">
        <h3>事务处理</h3>
        
        <el-form-item label="处理人" prop="handler">
          <el-input v-model="formData.handler"></el-input>
        </el-form-item>

        <el-form-item label="处理状态" prop="status">
          <el-select v-model="formData.status" placeholder="请选择处理状态">
            <el-option label="处理中" value="processing"></el-option>
            <el-option label="已完成" value="completed"></el-option>
            <el-option label="需协助" value="need-help"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="处理说明" prop="description">
          <el-input
            type="textarea"
            v-model="formData.description"
            :rows="4"
            placeholder="请详细描述处理过程和结果">
          </el-input>
        </el-form-item>

        <el-form-item label="处理时间" prop="handleTime">
          <el-date-picker
            v-model="formData.handleTime"
            type="datetime"
            placeholder="选择处理时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="相关附件" prop="attachments">
          <el-upload
            action="/api/file/upload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="5"
            :file-list="formData.attachments">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">可上传处理相关文件</div>
          </el-upload>
        </el-form-item>
      </div>

      <div class="form-actions">
        <el-button @click="prevStep">上一步</el-button>
        <el-button type="primary" @click="submitForm">下一步</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'AffairsHandle',
  data() {
    return {
      formData: {
        handler: '',
        status: '',
        description: '',
        handleTime: new Date(),
        attachments: []
      },
      rules: {
        handler: [{ required: true, message: '请输入处理人', trigger: 'blur' }],
        status: [{ required: true, message: '请选择处理状态', trigger: 'change' }],
        description: [{ required: true, message: '请输入处理说明', trigger: 'blur' }],
        handleTime: [{ required: true, message: '请选择处理时间', trigger: 'change' }]
      }
    }
  },
  methods: {
    handlePreview(file) {
      console.log(file)
    },
    handleRemove(file, fileList) {
      this.formData.attachments = fileList
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    prevStep() {
      this.$emit('prev-step')
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('next-step', this.formData)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.affairs-handle {
  .form-section {
    margin-bottom: 30px;
    
    h3 {
      margin: 0 0 20px;
      padding-left: 10px;
      border-left: 4px solid #409EFF;
      font-size: 18px;
      font-weight: 500;
      color: #303133;
    }
  }

  .form-actions {
    text-align: center;
    margin-top: 40px;
  }
}
</style> 